<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    num1: {{num1}} || num2: {{num2}}
    <capp :number1="num1" :number2="num2"
          @num1change="num1change"
          @num2change="num2change">
    </capp>
  </div>

  <template id="capp">
    <div>
      <h2>props-number1/num1: {{number1}}</h2>
      <h2>v-model: {{dnum1}}</h2>
      <input type="text" v-model="dnum1" @input="dnum1input">
  
      <h2>props-number2/num2: {{number2}}</h2>
      <h2>v-model: {{dnum2}}</h2>
      <input type="text" v-model="dnum2" @input="dnum2input">
    </div>
  </template>

  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        num1: 1,
        num2: 0
      },
      methods: {
        num1change(num) {
          this.num1 = parseFloat(num);
        },
        num2change(num) {
          this.num2 = parseFloat(num);
        }
      },
      components: {
        capp: {
          template: '#capp',
          // 父传子通信
          props: {
            number1: {type: Number,default: 0},
            number2: {type: Number,default: 0,}
          },
          data() {
            return {
              dnum1: this.number1,
              dnum2: this.number2
            }
          },
          methods: {
            dnum1input(event) {
              this.dnum2 = event.target.value * 100;
              this.$emit('num1change',event.target.value);
              this.$emit('num2change',this.dnum2);
            },
            dnum2input(event) {
              this.dnum1 = event.target.value / 100;
              this.$emit('num1change',this.dnum1);
              this.$emit('num2change',event.target.value);
            }
          }
        }
      }
    });
  </script>
</body>
</html>